<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            class="flex-bettom"
          >
            <div class="flex">
              <el-form-item label="工号名称">
                <el-input
                  v-model="form.keyword"
                  placeholder="请输入员工姓名或工号"
                  style="width: 286px"
                ></el-input>
              </el-form-item>
              <el-form-item label="报价状态">
                <el-input
                  v-model="form.quoteType"
                  placeholder="请输入报价状态"
                  style="width: 286px"
                ></el-input>
              </el-form-item>
              <el-form-item label="证件姓名" label-width="120px">
                <el-input
                  v-model="form.employeeName"
                  placeholder="请输入证件姓名"
                  style="width: 286px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="clear">重置</el-button>
              </el-form-item>
              <el-form-item>
                <div
                  style="
                    display: flex;
                    flex-flow: column;
                    color: red;
                    font-size: 16px;
                  "
                >
                  <span>当前派费直达模式: </span>
                  <span
                    >当前配置派费上限为:0.8
                    元/票,派费下限为:0.1元/票,员工派费配置请保证在此区间内</span
                  >
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-col :span="2">
        <div>
          <el-button type="primary" >自定义二级科目</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-table
            ref="tableData"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" width="120">
            </el-table-column>
            <el-table-column prop="employeeName" label="证件姓名" width="120">
            </el-table-column>
            <el-table-column
              prop="nickName"
              label="工号名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="employeeCode" label="工号" width="120">
            </el-table-column>
            <el-table-column
              prop="networkNameId"
              label="网点/承包区名"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="quoteType" label="报价状态" width="120">
            </el-table-column>
            <el-table-column prop="approvalNo" label="审批单号" width="120">
            </el-table-column>
            <el-table-column prop="approvalType" label="审核状态" width="120">
            </el-table-column>
            <el-table-column prop="directMode" label="直达模式" width="120">
            </el-table-column>
            <el-table-column prop="amount" label="单票费用(元)" width="120">
            </el-table-column>
            <el-table-column prop="freezeTime" label="冻结时间(天)" width="120">
            </el-table-column>
            <el-table-column prop="directManner" label="直达方式" width="120">
            </el-table-column>
            <el-table-column prop="effectiveTime" label="生效时间" width="120">
            </el-table-column>
            <el-table-column prop="expirationTime" label="失效时间" width="120">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="120">
            </el-table-column>
            <el-table-column prop="updateBy" label="操作人" width="120">
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="120">
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-button type="text" size="small" @click="deleteId(scope.row.id)"
                  >删除</el-button
                >
                
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
     <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="editForm"  :model="editForm" label-width="80px">
        <el-form-item label="所属网点">
            <el-input v-model="editForm.networkName" disabled></el-input>
        </el-form-item>
                  
                </el-form-item>
        <el-form-item label="名称">
            <el-input v-model="editForm.employeeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="工号">
            <el-input v-model="editForm.keyword" disabled></el-input>
        </el-form-item>
        <el-form-item label="基础派费模式">
            <el-input v-model="editForm.directMode" disabled></el-input>
        </el-form-item>
        <el-form-item label="单票费用(元)">
             <el-input v-model="editForm.amount" type="number" placeholder="只能输入数字"></el-input>
        </el-form-item>
        <el-form-item label="备注">
             <el-input v-model="editForm.remark" type="text" ></el-input>
        </el-form-item>
        <el-form-item label="直达方式">
                  <el-select
                    v-model="editForm.directManner"
                    placeholder="请选择直达方式"
                    style="width: 286px"
                  >
                    <el-option label="全量直达" value="全量直达"></el-option>
                    <el-option label="部分直达" value="部分直达"></el-option>
                  </el-select>
                </el-form-item>

                 <el-form-item label="冻结时间">
                  <el-select
                    v-model="editForm.freezeTime"
                    placeholder="请选择冻结时间"
                    style="width: 286px"
                  >
                    <el-option label="7天" value="7天"></el-option>
                    <el-option label="15天" value="15天"></el-option>
                    <el-option label="30天" value="30天"></el-option>
                  </el-select>
                </el-form-item>
      </el-form>



      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editTrue"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {feeThroughTableList, feeThroughSearch,updateFeeThrough,deleteByFeeThroughId } from "@/api/dashboard";

export default {
  data() {
    return {
        dialogVisible:false,
      form: {
        keyword: "",
        quoteType: "",
        employeeName: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      editForm:{
        directManner:'',
        amount:'',
        remark:'',
        freezeTime:'',
      },
      currentPage:1,
      total:0,

      tableData: [],
    };
  },
  created(){
    this.getList()
  },
  methods: {
    getList(){
        feeThroughTableList(this.form.pageDate.pageNum,this.form.pageDate.pageSize).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.form.pageDate.pageNum = res.data.pages;
        }
      });
    },
    // 编辑
    edit(data){
        this.editForm.networkName = data.networkName.networkName
        this.editForm.networkNameId = data.networkNameId
        this.editForm.remark = data.remark
        this.editForm.keyword = data.keyword
        this.editForm.employeeName = data.employeeName
        this.editForm.directMode = data.directMode
        this.editForm.amount = data.amount
        this.editForm.directManner = data.directManner
        this.editForm.freezeTime = data.freezeTime
        this.editForm.id = data.id
        this.dialogVisible = true
    },
    // 确认修改
    editTrue(){
        const ff = {
            remark: this.editForm.remark,
            amount:this.editForm.amount,
            directManner:this.editForm.directManner,
            freezeTime:this.editForm.freezeTime,
            id: this.editForm.id
        }
        updateFeeThrough(ff).then((res) => {
        if (res.code == 200) {
            this.$message({
          message: '修改成功',
          type: 'success'
        });
           this.dialogVisible = false
           this.getList()
        }
      });

    },
    // 删除
    deleteId(id){
        deleteByFeeThroughId(id).then((res) => {
        if (res.code == 200) {
            this.$message({
          message: '删除成功',
          type: 'success'
        });
           this.getList()
        }
      });

    },
    // 搜索
    search(){
        for (const key in this.form) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.form[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.form[key];
        }
      }
        feeThroughSearch(this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.form.pageDate.pageNum = res.data.pages;
        } else {
            this.tableData = []
        }
      });

    },
    // 重置
    clear(){
         for (const key in this.form) {
        if (key === "pageDate") {
          // 重置 pageDate 的值为默认值
          this.form[key] = { pageNum: 1, pageSize: 10 };
        } else {
          // 清空其他键
          this.form[key] = "";
        }
      }
    },
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val;
      this.getList();
    },

  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
